import { Form, Input } from 'antd'
import { useAuth } from 'context/auth-context'
import React from 'react'
import { LongButton } from 'unauthenticated-app'
import { useAsync } from 'utils/use-async'

// TS是鸭子类型(duck typing)：面向接口编程 而不是 面向对象编程
export const RegisterPage = ({onError} : { onError : ( error : Error) => void}) => {
  const {register} = useAuth()
  const {run, isLoading} = useAsync(undefined, { throwOnError: true })
  const handleSubmit = async ({cpassword,...values}: {username: string; password: string; cpassword: string}) => {
    if(cpassword !== values.password) {
      onError(new Error('请确认两次输入的密码相同'))
      return 
    }
    // 在try被调用时，catch同步调用，由于try catch中的try是异步请求,此时try还没有完成，因此catch捕获不到try的错误
    // 如果是使用.catch()的方式，catch会在try的请求完成再调用，不会出现该错误
    // 因此此处需要要async与await手动使register先完成 
    try {
      await run(register(values))
    } catch (e:any) {
      onError(e)
    }
  }

  return (
    <Form onFinish={handleSubmit}>
      <Form.Item name={'username'} rules={[{ required: true, message: '请输入用户名' }]}>
        <Input placeholder={'用户名'} type="text" id={'username'} />
      </Form.Item>
      <Form.Item name={'password'} rules={[{ required: true, message: '请输入密码' }]}>
        <Input placeholder={'密码'} type="password" id={'password'} />
      </Form.Item>
      <Form.Item name={'cpassword'} rules={[{ required: true, message: '请输入确认密码' }]}>
        <Input placeholder={'确认密码'} type="password" id={'cpassword'} />
      </Form.Item>
      <Form.Item >
        <LongButton loading={isLoading} htmlType={'submit'} type={'primary'}>注册</LongButton>
      </Form.Item>
    </Form>
  )
}
